import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import {  Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { Content } from 'antd/lib/layout/layout';

/**
 * 富文本编辑器
 * https://github.com/jpuri/react-draft-wysiwyg
 * 演示：https://jpuri.github.io/react-draft-wysiwyg/#/
 */
 export default class RichTextEditor extends Component {
   
  static propTypes = {
    detail: PropTypes.string
  };

  constructor(props){
    super(props);
    // 获取detail初始化editorState
    const html = this.props.detail;
    if(html){
      const contentBlock = htmlToDraft(html);
      if(contentBlock){
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
        const editorState = EditorState.createWithContent(contentState);
        this.state = {
          editorState
        };
      }
    }else{
      this.state = {
        //  创建一个没有内容的编辑对象
        editorState: EditorState.createEmpty(),
      };
    }
  }
   
   
   /**
    * 监听输入变动
    * @param {*} editorState 
    */
   onEditorStateChange = (editorState) => {
     console.log('onEditorStateChange输入时变动');  
     this.setState({
       editorState,
     });
   };
   

   /**
    * 获取编辑器内容
    * @returns 
    */
   getDetail = () => {
    //  返回输入数据对应的html格式的文本
     return draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()));
   }

   
   /**
    * 图片上传
    * @param {*} file 
    * @returns 
    */
   uploadImageCallBack = (file) => {
    return new Promise(
      (resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://api.imgur.com/3/image');
        const data = new FormData();
        data.append('image', file);
        xhr.send(data);
        xhr.addEventListener('load', () => {
          const response = JSON.parse(xhr.responseText);
          // 这里resolve中需要这样resolve({data:{ link: res.data.url }})
          resolve(response);
        });
        xhr.addEventListener('error', () => {
          const error = JSON.parse(xhr.responseText);
          reject(error);
        });
      }
    );
  }
 
   render() {
    //  该对象传给编辑器组件  
     const { editorState } = this.state;
     return (
       <div>
         <Editor
           editorState={editorState}
           wrapperClassName="demo-wrapper"
           // 1.通过设置该类名来添加样式   
           // editorClassName="demo-editor"

           // 直接行内设置样式  
           editorStyle={{border: '1px solid #333', minHeight: '200px', padding: '10px'}}
           onEditorStateChange={this.onEditorStateChange}
           toolbar={{
            image: { uploadCallback: this.uploadImageCallBack, alt: { present: true, mandatory: true } },
           }}
         />

         {/* 下面文本域为效果展示，线上环境不需要 */}
         {/* <textarea
           disabled
           //  draftToHtml 转换为html代码内容
           value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
         /> */}
       </div>
     );
   }
 }